// 移动端订单页面样式优化

// 全局移动端优化
@media (max-width: 768px) {
  // 卡片样式优化
  .el-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    ::v-deep .el-card__body {
      padding: 15px;
    }
  }
  
  // 按钮样式优化
  .el-button {
    border-radius: 6px;
    font-size: 13px;
    
    &.el-button--mini {
      padding: 6px 12px;
      font-size: 12px;
    }
  }
  
  // 输入框样式优化
  .el-input {
    ::v-deep .el-input__inner {
      border-radius: 6px;
      font-size: 14px;
      height: 36px;
      
      &:focus {
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
      }
    }
  }
  
  // 标签样式优化
  .el-tag {
    border-radius: 4px;
    font-size: 11px;
    
    &.el-tag--mini {
      font-size: 10px;
      padding: 2px 6px;
    }
  }
  
  // 分页样式优化
  .el-pagination {
    ::v-deep .el-pager li {
      min-width: 28px;
      height: 28px;
      line-height: 28px;
      font-size: 12px;
    }
    
    ::v-deep .btn-prev,
    ::v-deep .btn-next {
      width: 28px;
      height: 28px;
      line-height: 28px;
      font-size: 12px;
    }
  }
  
  // 描述列表样式优化
  .el-descriptions {
    ::v-deep .el-descriptions__label {
      font-weight: 500;
      color: #666;
    }
    
    ::v-deep .el-descriptions__content {
      color: #333;
    }
  }
  
  // 骨架屏样式优化
  .el-skeleton {
    ::v-deep .el-skeleton__item {
      border-radius: 4px;
    }
  }
  
  // 空状态样式优化
  .el-empty {
    ::v-deep .el-empty__description {
      color: #999;
      font-size: 13px;
    }
  }
}

// 超小屏幕优化
@media (max-width: 480px) {
  .el-card {
    ::v-deep .el-card__body {
      padding: 12px;
    }
  }
  
  .el-button {
    font-size: 12px;
    
    &.el-button--mini {
      padding: 4px 8px;
      font-size: 11px;
    }
  }
  
  .el-input {
    ::v-deep .el-input__inner {
      font-size: 13px;
      height: 32px;
    }
  }
  
  .el-tag {
    font-size: 10px;
    
    &.el-tag--mini {
      font-size: 9px;
      padding: 1px 4px;
    }
  }
}

// 触摸设备优化
@media (hover: none) and (pointer: coarse) {
  .el-button {
    min-height: 44px; // 确保触摸目标足够大
    
    &.el-button--mini {
      min-height: 36px;
    }
  }
  
  .el-input {
    ::v-deep .el-input__inner {
      min-height: 44px;
    }
  }
  
  .el-card {
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:active {
      transform: scale(0.98);
    }
  }
}

// 深色模式支持（如果需要）
@media (prefers-color-scheme: dark) {
  .mobile-order-container {
    background-color: #1a1a1a;
  }
  
  .el-card {
    background-color: #2d2d2d;
    border-color: #404040;
  }
  
  .el-descriptions {
    ::v-deep .el-descriptions__label {
      color: #ccc;
    }
    
    ::v-deep .el-descriptions__content {
      color: #fff;
    }
  }
}
